<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0}
ul,li{ list-style:none;}
.out{width:623px; height:228px;padding:10px 0;margin:0 auto;margin-top:20px;border:1px solid #ccc;position:relative;}
.box{width:555px; height:228px;margin:0 auto; overflow:hidden;}
.content{width:1110px;}
.content .scrollPic{width:175px; height:228px; float:left;margin:0 5px;}
.out .left,.out .right{width:24px; height:40px; position:absolute;top:104px;cursor:pointer;}
.out .left{left:5px;}
.out .right{right:5px;}
</style>
<script src="../pengxuan.js"></script>
<script>
window.onload=function(){
	var out=getClass('out')[0];
	var left=getClass('left',out)[0];
	var right=getClass('right',out)[0];	
	var con=getClass('content',out)[0];
	left.onclick=function(){
		var last=getLast(con);
		con.insertBefore(last,getFirst(con));	
	};
	right.onclick=function(){
		var first=getFirst(con);
		con.appendChild(first)	
	};
	
};

</script>

</head>

<body>
<div class="out">
	<div class="left"><img src="../img/left.png" width="24" height="40" /></div>
	<div class="right"><img src="../img/right.png" width="24" height="40" /></div>
	<div class="box">
    	<ul class="content">
        	<li class="scrollPic"><img src="../img/1.jpg" width="175" height="228" /></li>
        	<li class="scrollPic"><img src="../img/2.jpg" width="175" height="228" /></li>
        	<li class="scrollPic"><img src="../img/3.jpg" width="175" height="228" /></li>
        	<li class="scrollPic"><img src="../img/4.jpg" width="175" height="228" /></li>
        	<li class="scrollPic"><img src="../img/5.jpg" width="175" height="228" /></li>
        	<li class="scrollPic"><img src="../img/6.jpg" width="175" height="228" /></li>
     	
<!--			<li class="scrollPic">1</li>   
			<li class="scrollPic">2</li>   
			<li class="scrollPic">3</li>   
			<li class="scrollPic">4</li>   
			<li class="scrollPic">5</li>   
			<li class="scrollPic">6</li>   
-->		</ul>
    </div>
</div>

</body>
</html>
